<!--
 * @version:
 * @Author: jiaqngzhen
 * @Company: aikucun
 * @Date: 2020-06-03 14:03:04
 * @LastEditors: jiaqingzhen
 * @LastEditTime: 2020-06-08 17:33:14
 * @Description:
-->
<template>
  <div class="title_warp">
    <div class="title">
      <img :src="left" alt="" />
      <span>{{ name }}</span>
      <img :src="right" alt="" />
    </div>
    <div class="more">更多<van-icon name="arrow" /></div>
  </div>
</template>
<script>
import renqi1 from './../img/renqi-1.png';
import renqi2 from './../img/renqi-2.png';
import haowu1 from './../img/goodProduct-1.png';
import haowu2 from './../img/goodProduct-2.png';
import tejia1 from './../img/tejia-1.png';
import tejia2 from './../img/tejia-2.png';
import tuijian1 from './../img/tuijian-1.png';
import tuijia2 from './../img/tuijian-2.png';
import hot1 from './../img/hot-1.png';
import hot2 from './../img/hot-2.png';
export default {
  name: 'titleC',
  props: {
    name: {
      type: String,
      default: '热卖会场'
    }
  },
  data() {
    return {
      left: '',
      right: ''
    };
  },
  mounted() {
    if (this.name == '人气大牌') {
      this.left = renqi1;
      this.right = renqi2;
    } else if (this.name == '热卖会场') {
      this.left = hot1;
      this.right = hot2;
    } else if (this.name == '推荐大牌') {
      this.left = tuijian1;
      this.right = tuijia2;
    } else if (this.name == '特价爆款') {
      this.left = tejia1;
      this.right = tejia2;
    } else {
      this.left = haowu1;
      this.right = haowu2;
    }
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.title_warp {
  width: 100%;
  position: relative;
  margin-bottom: 12px;
  margin-top: 19px;
  padding: 0 10px;
  box-sizing: border-box;
  .title {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    span {
      height: 16px;
      font-size: 17px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      display: block;
      width: 88px;
      text-align: center;
      margin-bottom: 2px;
    }
    img {
      height: 20px;
    }
  }
  .more {
    position: absolute;
    right: 10px;
    top: 0;
    // width: 42px;
    height: 17px;
    border: 1px solid rgba(255, 255, 255, 1);
    opacity: 0.8;
    border-radius: 9px;
    font-size: 10px;
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    // padding-left: 4px;
    padding: 3px 4px;
  }
}
</style>
